<template>
  <div class="divbg">
    <h1>员工管理</h1>
    <!-- 按钮 -->
    <div class="topBtn">
      <div class="searchBtn">
        <el-button class="btnStyle" @click="searchZG"
          >在岗
          <el-tag
            type="danger"
            class="mx-1"
            effect="dark"
            round
            style="
              position: absolute;
              right: -16px;
              top: -10px;
              border: 1px solid #ffffff;
            "
            size="small"
          >
            {{ tipInfo.tipRZ }}
          </el-tag>
        </el-button>
        <el-button class="btnStyle" type="danger" @click="searchLZ"
          >离职
          <el-tag
            type="danger"
            class="mx-1"
            effect="dark"
            round
            style="
              position: absolute;
              right: -16px;
              top: -10px;
              border: 1px solid #ffffff;
            "
            size="small"
          >
            {{ tipInfo.tipLZ }}
          </el-tag>
        </el-button>
        <el-button class="btnStyle" @click="searchCQ"
          >长期派遣
          <el-tag
            type="danger"
            class="mx-1"
            effect="dark"
            round
            style="
              position: absolute;
              right: -20px;
              top: -10px;
              border: 1px solid #ffffff;
            "
            size="small"
          >
            {{ tipInfo.tipCQ }}
          </el-tag>
        </el-button>
        <el-button class="btnStyle" @click="searchDQ"
          >短期派遣
          <el-tag
            type="danger"
            class="mx-1"
            effect="dark"
            round
            style="
              position: absolute;
              right: -16px;
              top: -10px;
              border: 1px solid #ffffff;
            "
            size="small"
          >
            {{ tipInfo.tipDQ }}
          </el-tag>
        </el-button>
        <el-button class="btnStyle" @click="searchXY"
          >学员
          <el-tag
            type="danger"
            class="mx-1"
            effect="dark"
            round
            style="
              position: absolute;
              right: -16px;
              top: -10px;
              border: 1px solid #ffffff;
            "
            size="small"
          >
            {{ tipInfo.tipXY }}
          </el-tag>
        </el-button>
        <el-button class="btnStyle" @click="searchRE"
          >重复人员
          <el-tag
            type="danger"
            class="mx-1"
            effect="dark"
            round
            style="
              position: absolute;
              right: -16px;
              top: -10px;
              border: 1px solid #ffffff;
            "
            size="small"
          >
            {{ tipInfo.tipRE }}
          </el-tag>
        </el-button>
        <el-button class="btnStyle" @click="reset">重置</el-button>
        <el-button class="btnStyle" type="danger" @click="delitem"
          >批量删除</el-button
        >
      </div>
      <div class="addinfo">
        <el-button type="primary">导入员工</el-button>
      </div>
    </div>
    <!-- 输入框 -->
    <div class="searchBox">
      <div class="searchinp">
        <el-input
          v-model="inpData.inpName"
          :suffix-icon="Search"
          placeholder="请输入员工姓名"
          style="width: 180px; height: 32px"
          @input="searchinput"
        />
        <el-select
          v-model="inpData.inpComp"
          class="m-2"
          placeholder="请选择公司"
          style="width: 180px"
          @change="searchinput"
        >
          <el-option
            v-for="item in comlist"
            :key="item.id"
            :label="item.account"
            :value="item.account"
          />
        </el-select>
        <el-input
          v-model="inpData.inpItem"
          :suffix-icon="Search"
          placeholder="请输入项目名称"
          style="width: 180px; height: 32px; margin-right: 10px"
          @input="searchinput"
        />
        <el-tree-select
          v-model="inpData.inpDj"
          :data="grades"
          :render-after-expand="false"
          style="width: 180px"
          :props="{ lable: 'title', value: 'title' }"
          @change="searchinput"
        />
        <el-select
          v-model="inpData.inpZs"
          class="m-2"
          placeholder="请选择证书"
          style="width: 180px"
          @change="searchinput"
        >
          <el-option
            v-for="item in certList"
            :key="item.value"
            :label="item.title"
            :value="item.title"
          />
        </el-select>
        <el-date-picker
          v-model="inpData.inpYears"
          type="month"
          placeholder="请选择年月"
          @change="searchYear"
        />
      </div>
      <div>
        <el-button type="primary" color="#0052CC" @click="addinfo"
          >新增</el-button
        >
      </div>
    </div>
    <!-- <div class="tableBox"> </div> -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      v-loading="loading"
      ref="multipleTableRef"
    >
      <el-table-column type="selection" width="40" fixed="left" />
      <el-table-column label="姓名" width="100" fixed="left">
        <template v-slot="scope">
          <span
            style="cursor: pointer; color: #2151c5"
            @click="eridbtn(scope.row.id, scope.row.name)"
            >{{ scope.row.name }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="base_pay"
        label="岗位工资"
        width="100"
        fixed="left"
      />
      <el-table-column
        prop="grade_title"
        label="岗位档级"
        width="100"
        fixed="left"
      />
      <el-table-column prop="sex" label="性别" width="60" />
      <el-table-column prop="birthday" label="生日" width="120" />
      <el-table-column prop="tel" label="手机号" width="140" />
      <el-table-column prop="idcard" label="身份证号" width="180" />
      <el-table-column prop="title" label="项目名称" width="160" />
      <el-table-column prop="account" label="公司名称" width="100" />
      <el-table-column prop="political_status" label="政治面貌" width="100" />
      <el-table-column prop="address" label="籍贯" width="140" />
      <el-table-column prop="record" label="学历" width="100" />
      <el-table-column prop="create_time" label="创建时间" width="160" />
      <el-table-column label="员工状态" width="100">
        <template v-slot="scope">
          {{ scope.row.status == 1 ? "在岗" : "离职" }}
        </template>
      </el-table-column>
      <el-table-column label="用工形式" width="100">
        <template v-slot="scope">
          {{
            scope.row.layout == 1
              ? "长期派遣"
              : scope.row.layout == 2
                ? "短期派遣"
                : "学员"
          }}
        </template>
      </el-table-column>
      <el-table-column label="入职时间" width="140">
        0000-00-00
      </el-table-column>
      <el-table-column prop="contract_between" label="合同时间区间" width="230"
        >-</el-table-column
      >
      <el-table-column prop="" label="离职时间" width="160" />
      <el-table-column
        prop="agreement_num"
        label="现合同期限"
        width="100"
      ></el-table-column>
      <el-table-column prop="bank_card" label="银行卡号" width="210" />
      <el-table-column prop="bank" label="开户行" width="210" />
      <el-table-column label="操作" width="160" fixed="right">
        <template v-slot="scope">
          <el-dropdown @command="handleCommand(scope.row.id)">
            <span class="el-dropdown-link" style="outline: none">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a" @click="dialogFormVisible = true"
                  >档级调整</el-dropdown-item
                >
                <el-dropdown-item command="b">岗位调整</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div class="pageBox">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :small="small"
        :disabled="disabled"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDatalen"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 档级弹窗 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="修改档级"
      align-center
      width="600"
    >
      <el-form :model="dangForm">
        <el-form-item label="基本工资" style="font-weight: 100">
          <el-input v-model="dangForm.salary" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="岗位档级">
          <el-select v-model="dangForm.stage" placeholder="请选择">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增弹窗 -->
    <el-dialog v-model="addmodelshow" title="添加人员信息" align-center>
      <el-form
        :model="addform"
        style="display: flex; flex-wrap: wrap"
        label-position="top"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="姓名" class="addinput" prop="name">
          <el-input
            v-model="addform.name"
            autocomplete="off"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="手机号" class="addinput" prop="tel">
          <el-input
            type="number"
            v-model="addform.tel"
            autocomplete="off"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="证件号码" class="addinput" prop="idcard">
          <el-input
            v-model="addform.idcard"
            autocomplete="off"
            placeholder="请输入证件号码"
            @change="idcardinp"
          />
        </el-form-item>
        <el-form-item label="性别" class="addinput">
          <el-input
            v-model="addform.sex"
            autocomplete="off"
            placeholder="输入身份证号自动填充"
            disabled
          />
        </el-form-item>
        <el-form-item label="生日" class="addinput">
          <el-input
            v-model="addform.birthday"
            autocomplete="off"
            placeholder="输入身份证号自动填充"
            :prefix-icon="Calendar"
            disabled
          />
        </el-form-item>
        <el-form-item label="籍贯" class="addinput" prop="address">
          <el-input
            v-model="addform.address"
            autocomplete="off"
            placeholder="请选择籍贯"
          />
        </el-form-item>
        <el-form-item label="岗位档级" class="addinput" prop="gradeid">
          <el-tree-select
            v-model="addform.gradeid"
            :data="addgrads"
            :render-after-expand="false"
            style="width: 180px"
            :props="{ label: 'title', value: 'id' }"
            @change="gangweis"
          />
        </el-form-item>
        <el-form-item label="岗位工资" class="addinput">
          <el-input
            v-model="addform.base_pay"
            autocomplete="off"
            placeholder="选择档级后自动填充"
            disabled
          />
        </el-form-item>
        <el-form-item label="学历" class="addinput" prop="record">
          <el-select
            v-model="addform.record"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="初中及以下" value="初中及以下" />
            <el-option label="高中" value="高中" />
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="研究生" value="研究生" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="开户行" class="addinput" prop="bank">
          <el-input
            v-model="addform.bank"
            autocomplete="off"
            placeholder="请输入开户行"
          />
        </el-form-item>
        <el-form-item label="银行卡号" class="addinput" prop="bank_card">
          <el-input
            type="number"
            v-model="addform.bank_card"
            autocomplete="off"
            placeholder="请输入银行卡号"
          />
        </el-form-item>
        <el-form-item label="政治面貌" class="addinput" prop="political_status">
          <el-select
            v-model="addform.political_status"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="群众" value="群众" />
            <el-option label="团员" value="团员" />
            <el-option label="党员" value="党员" />
          </el-select>
        </el-form-item>
        <el-form-item label="公司" class="addinput" prop="companyid">
          <el-select
            v-model="addform.companyid"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option
              v-for="item in comlist"
              :key="item.id"
              :label="item.account"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目" class="addinput" prop="projectid">
          <el-cascader
            :options="comchild"
            v-model="addform.projectid"
            :props="{ label: 'title', value: 'id', children: 'project' }"
            :show-all-levels="false"
          />
        </el-form-item>
        <el-form-item label="用工形式" class="addinput" prop="layou">
          <el-select
            v-model="addform.layou"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="长期派遣" value="1" />
            <el-option label="短期派遣" value="2" />
            <el-option label="学员" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="员工状态" class="addinput" prop="status">
          <el-select
            v-model="addform.status"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="在岗" value="1" />
            <el-option label="离职" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="合同到期时间"
          class="addinput"
          prop="agreement_end"
        >
          <el-date-picker
            v-model="tititit"
            type="date"
            placeholder="请选择"
            style="width: 101%"
            @change="datehuan"
          />
        </el-form-item>
        <el-form-item
          label="现合同期限(年)"
          class="addinput"
          prop="agreement_num"
        >
          <el-input
            type="number"
            v-model="addform.agreement_num"
            autocomplete="off"
            placeholder="请输入现合同期限"
          />
        </el-form-item>
        <el-form-item label="入职时间" class="addinput">
          <el-date-picker
            v-model="rutime"
            type="date"
            placeholder="请选择"
            style="width: 101%"
          />
        </el-form-item>
        <el-form-item label="离职时间" class="addinput">
          <el-date-picker
            v-model="addform.lizhitime"
            type="date"
            placeholder="请选择"
            style="width: 101%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addsure"> 确认添加 </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="editmodels" title="修改人员信息" align-center>
      <el-form
        :model="editinfo"
        style="display: flex; flex-wrap: wrap"
        label-position="top"
        :rules="ruless"
        ref="ruleFormRefs"
      >
        <el-form-item label="姓名" class="addinput" prop="name">
          <el-input
            v-model="editinfo.name"
            autocomplete="off"
            placeholder="请输入姓名"
            disabled
          />
        </el-form-item>
        <el-form-item label="手机号" class="addinput" prop="tel">
          <el-input
            type="number"
            v-model="editinfo.tel"
            autocomplete="off"
            placeholder="请输入手机号"
            disabled
          />
        </el-form-item>
        <el-form-item label="证件号码" class="addinput" prop="idcard">
          <el-input
            v-model="editinfo.idcard"
            autocomplete="off"
            placeholder="请输入证件号码"
            @input="idcardinps"
          />
        </el-form-item>
        <el-form-item label="性别" class="addinput">
          <el-input
            v-model="editinfo.sex"
            autocomplete="off"
            placeholder="输入身份证号自动填充"
            disabled
          />
        </el-form-item>
        <el-form-item label="生日" class="addinput">
          <el-input
            v-model="editinfo.birthday"
            autocomplete="off"
            placeholder="输入身份证号自动填充"
            :prefix-icon="Calendar"
            disabled
          />
        </el-form-item>
        <el-form-item label="籍贯" class="addinput" prop="address">
          <el-input
            v-model="editinfo.address"
            autocomplete="off"
            placeholder="请选择籍贯"
          />
        </el-form-item>
        <el-form-item label="岗位档级" class="addinput" prop="gradeid">
          <el-tree-select
            v-model="editinfo.gradeid"
            :data="addgrads"
            :render-after-expand="false"
            style="width: 180px"
            :props="{ label: 'title', value: 'id' }"
            disabled
          />
        </el-form-item>
        <el-form-item label="岗位工资" class="addinput">
          <el-input
            v-model="editinfo.base_pay"
            autocomplete="off"
            placeholder="选择档级后自动填充"
            disabled
          />
        </el-form-item>
        <el-form-item label="学历" class="addinput" prop="record">
          <el-select
            v-model="editinfo.record"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="初中及以下" value="初中及以下" />
            <el-option label="高中" value="高中" />
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="研究生" value="研究生" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="开户行" class="addinput" prop="bank">
          <el-input
            v-model="editinfo.bank"
            autocomplete="off"
            placeholder="请输入开户行"
          />
        </el-form-item>
        <el-form-item label="银行卡号" class="addinput" prop="bank_card">
          <el-input
            type="number"
            v-model="editinfo.bank_card"
            autocomplete="off"
            placeholder="请输入银行卡号"
          />
        </el-form-item>
        <el-form-item label="政治面貌" class="addinput" prop="political_status">
          <el-select
            v-model="editinfo.political_status"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="群众" value="群众" />
            <el-option label="团员" value="团员" />
            <el-option label="党员" value="党员" />
          </el-select>
        </el-form-item>
        <el-form-item label="公司" class="addinput" prop="companyid">
          <el-select
            v-model="editinfo.companyid"
            placeholder="请选择"
            style="width: 101%"
            disabled
          >
            <el-option
              v-for="item in comlist"
              :key="item.id"
              :label="item.account"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目" class="addinput" prop="projectid">
          <el-cascader
            :options="comchild"
            v-model="editinfo.projectid"
            :props="{ label: 'title', value: 'id', children: 'project' }"
            :show-all-levels="false"
            disabled
          />
        </el-form-item>
        <el-form-item label="用工形式" class="addinput">
          <el-select
            v-model="editinfo.layout"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="长期派遣" value="1" />
            <el-option label="短期派遣" value="2" />
            <el-option label="学员" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="员工状态" class="addinput" prop="status">
          <el-select
            v-model="editinfo.status"
            placeholder="请选择"
            style="width: 101%"
          >
            <el-option label="在岗" value="1" />
            <el-option label="离职" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="合同到期时间"
          class="addinput"
          prop="agreement_end"
        >
          <el-date-picker
            v-model="tititits"
            type="date"
            placeholder="请选择"
            style="width: 101%"
            @change="datehuans"
          />
        </el-form-item>
        <el-form-item
          label="现合同期限(年)"
          class="addinput"
          prop="agreement_num"
        >
          <el-input
            type="number"
            v-model="editinfo.agreement_num"
            autocomplete="off"
            placeholder="请输入现合同期限"
          />
        </el-form-item>
        <el-form-item label="个人社保基数" class="addinput">
          <el-input
            type="number"
            v-model="editinfo.ge"
            autocomplete="off"
            placeholder="0.00"
          />
        </el-form-item>
        <el-form-item label="单位社保基数" class="addinput">
          <el-input
            type="number"
            v-model="editinfo.dan"
            autocomplete="off"
            placeholder="0.00"
          />
        </el-form-item>
        <el-form-item label="入职时间" class="addinput">
          <el-input
            v-model="editinfo.ruzhitime"
            placeholder="Pick a date"
            :prefix-icon="Calendar"
            disabled
          />
        </el-form-item>
        <el-form-item label="离职时间" class="addinput">
          <el-date-picker
            v-model="editinfo.lizhitime"
            type="date"
            placeholder="请选择"
            style="width: 101%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="editsure"> 确认修改 </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 抽屉 -->
    <el-drawer
      v-model="editmodel"
      :with-header="false"
      direction="rtl"
      size="75%"
    >
      <div class="edittitle">
        <p>{{ mname }}</p>
        <el-button link @click="closeDrawer">✖</el-button>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="drawer_top">
            <div>岗位信息</div>
            <p @click="editshow">编辑</p>
          </div>
          <div class="drawer_comtent">
            <el-form
              label-position="top"
              style="width: 100%; display: flex; flex-wrap: wrap"
            >
              <el-form-item label="姓名" class="editecho">
                <el-input v-model="editinfo.name" disabled />
              </el-form-item>
              <el-form-item label="姓别" class="editecho">
                <el-input v-model="editinfo.sex" disabled />
              </el-form-item>
              <el-form-item label="籍贯" class="editecho">
                <el-input v-model="editinfo.address" disabled />
              </el-form-item>
              <el-form-item label="学历" class="editecho">
                <el-input v-model="editinfo.record" disabled />
              </el-form-item>
              <el-form-item label="电话" class="editecho">
                <el-input v-model="editinfo.tel" disabled />
              </el-form-item>
              <el-form-item label="形象" class="editecho">
                <el-input v-model="editinfo.political_status" disabled />
              </el-form-item>
              <el-form-item label="身份证号" class="editecho">
                <el-input v-model="editinfo.idcard" disabled />
              </el-form-item>
              <el-form-item label="银行卡号" class="editecho">
                <el-input v-model="editinfo.bank_card" disabled />
              </el-form-item>
              <el-form-item label="所在公司" class="editecho">
                <el-input v-model="editinfo.company" disabled />
              </el-form-item>
              <el-form-item label="用工形式" class="editecho">
                <el-input v-model="editinfo.layout" disabled />
              </el-form-item>
              <el-form-item label="档级" class="editecho">
                <el-input v-model="editinfo.grade" disabled />
              </el-form-item>
              <el-form-item label="基本工资" class="editecho">
                <el-input v-model="editinfo.money" disabled />
              </el-form-item>
              <el-form-item label="创建时间" class="editecho">
                <el-input v-model="editinfo.create_time" disabled />
              </el-form-item>
              <el-form-item label="所属项目" class="editecho">
                <el-input v-model="editinfo.project" disabled />
              </el-form-item>
              <el-form-item label="开户行" class="editecho">
                <el-input v-model="editinfo.bank" disabled />
              </el-form-item>
              <el-form-item label="到期时间" class="editecho">
                <el-input v-model="tititits" disabled />
              </el-form-item>
              <el-form-item label="签订年数" class="editecho">
                <el-input v-model="editinfo.agreement_num" disabled />
              </el-form-item>
              <el-form-item label="密码" class="editecho">
                <el-input v-model="editinfo.password" disabled />
              </el-form-item>
              <el-form-item label="个人社保基数" class="editecho">
                <el-input v-model="editinfo.ge" disabled />
              </el-form-item>
              <el-form-item label="单位社保基数" class="editecho">
                <el-input v-model="editinfo.dan" disabled />
              </el-form-item>
              <el-form-item label="入职时间" class="editecho">
                <el-input v-model="editinfo.ruzhitime" disabled />
              </el-form-item>
              <el-form-item label="离职时间" class="editecho">
                <el-input v-model="editinfo.lizhitime" disabled />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="员工合同" name="second">Config</el-tab-pane>
        <el-tab-pane label="工资社保" name="third">Role</el-tab-pane>
        <el-tab-pane label="证书列表" name="fourth">
          <div class="cardbox">
            <el-col
              :span="6"
              class="cards"
              v-for="(item, index) of certList"
              :key="index"
              @click="cardBtn(item.id, index)"
            >
              <el-card shadow="hover">
                <div class="carditem">
                  {{ item.title }}
                  <img class="upimg" src="../../assets/img/upimg.png" />
                </div>
              </el-card>
            </el-col>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>

    <!-- 删除弹窗 -->
    <el-dialog v-model="centerDialogVisible" title="警告！" width="30%" center>
      <span> 是否删除选中员工信息 </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="delsure"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 证书添加、回显弹窗 -->
    <el-dialog v-model="cardmodels" title="修改人员信息" align-center>
      <el-form
        :model="cardForm"
        :rules="cardrule"
        ref="cardFormRef"
        label-position="right"
        v-loading="loading"
      >
        <el-form-item
          label="证书名称"
          prop="title"
          class="cardinpt"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="cardForm.title"
            autocomplete="off"
            placeholder="请输入证书名称"
          />
        </el-form-item>
        <el-form-item
          label="证书等级"
          class="cardinpt"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="cardForm.level"
            autocomplete="off"
            placeholder="请输入证书等级"
          />
        </el-form-item>
        <el-form-item
          label="证书获取时间"
          prop="gettime"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="cardForm.gettime"
            type="date"
            placeholder="证书获取时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item
          label="证书复审时间"
          prop="review_time"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="cardForm.review_time"
            type="date"
            placeholder="证书复审时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item
          label="证书图片"
          prop="thumb"
          class="cardinpt"
          :label-width="formLabelWidth"
        >
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="http://test_labour.xingyuncm.cn/api/common/upload"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="cardForm.thumb" :src="cardForm.thumb" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="carddel"> 删除证书 </el-button>
          <el-button type="primary" @click="cardsure">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { Calendar, Search } from "@element-plus/icons-vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
import type { TabsPaneContext } from "element-plus";
// 接口导入
import {
  itemList,
  addItem,
  delItem,
  editItem,
  transfer,
  adjust,
  reqUpload,
  compList,
  projectList,
  gradeList,
  certclass,
  cerdshow,
  cerdadd,
  cerdel
} from "@/api/staff";

function GetTreeData(data) {
  let TreeData = [];
  let map = new Map(); //存在id,对应所在的内存地址
  // console.log(map);
  let outputObj, pid;
  for (let i = 0; i < data.length; i++) {
    pid = data[i].pid;
    if (map.has(pid)) {
      //存在，将些信息，加入到对应id=pid的对象上的children
      if (!map.get(pid).children) map.get(pid).children = [];
      let obj = new Object(data[i]);
      map.get(pid).children.push(obj);
      map.set(data[i].id, obj);
      // console.log(map);
    } else if (!map.has(pid) && pid == 0) {
      //这里处理pid不存在，且pid 为0的处理，pid不存在，且不为0的，程序不考虑这种情况
      outputObj = new Object(data[i]);
      TreeData.push(outputObj);
      map.set(data[i].id, outputObj);
      // console.log(map);
    }
  }
  return TreeData;
  console.log(map);
}

const router = useRouter();
// 气泡数据
const tipInfo = reactive({
  tipRZ: 0,
  tipLZ: 0,
  tipCQ: 0,
  tipDQ: 0,
  tipXY: 0,
  tipRE: 0
});
// 搜索框参数
const inpData = reactive({
  inpName: "",
  inpComp: "",
  inpItem: "",
  inpDj: "",
  inpZs: "",
  inpYear: "",
  inpYears: ""
});
const rearr = ref([]);
// 分页组件参数
const currentPage = ref<any>(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const tableDatalen = ref(0);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

// 搜索公司下拉框
const companyL = ref([]);

// -------------------员工信息列表请求/渲染---------------------
const tableData = ref([]);
const reserTable = ref([]);
responseData();
comResponse();
gradeResponse();
certclassResponse();
function responseData() {
  new Promise((resolve, reject) => {
    itemList()
      .then(res => {
        console.log(JSON.parse(res));
        tableData.value = JSON.parse(res).data;
        reserTable.value = JSON.parse(res).data;
        console.log(tableData.value);
        tableDatalen.value = tableData.value.length;
        bubble(tableData.value);
        remen(tableData.value);
      })
      .catch(error => {
        reject(error);
      });
  });
}
// 公司下拉数据请求
const comlist = ref([]);
const comchild = ref([]);
function comResponse() {
  new Promise((resolve, reject) => {
    compList()
      .then(res => {
        console.log(JSON.parse(res));
        comlist.value = JSON.parse(res).companylist;
        comchild.value = titlecom(JSON.parse(res).data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

let titlecom = data => {
  for (let item of data) {
    item.title = item.account;
  }
  return data;
};
// 档级下拉数据请求
const grades = ref([]);
const addgrads = ref([]);
function gradeResponse() {
  new Promise((resolve, reject) => {
    gradeList()
      .then(res => {
        grades.value = GetTreeData(JSON.parse(res).list);
        addgrads.value = GetTreeData(JSON.parse(res).list);
        console.log(grades.value);
      })
      .catch(error => {
        reject(error);
      });
  });
}
// 证书分类-列表数据请求
const certList = ref([]);
function certclassResponse() {
  new Promise((resolve, reject) => {
    certclass()
      .then(res => {
        certList.value = JSON.parse(res).data;
        console.log(certList.value);
      })
      .catch(error => {
        reject(error);
      });
  });
}

// 气泡数据渲染
let bubble = data => {
  for (let item of data) {
    if (item.status == 1) {
      tipInfo.tipRZ++;
    }
    if (item.status == 2) {
      tipInfo.tipLZ++;
    }
    if (item.layout == 1) {
      tipInfo.tipCQ++;
    }
    if (item.layout == 2) {
      tipInfo.tipDQ++;
    }
    if (item.layout == 3) {
      tipInfo.tipXY++;
    }
  }
};
let remen = data => {
  for (let i = 0; i < data.length - 1; i++) {
    if (data[i].name == data[i + 1].name) {
      console.log(data[i]);
      tipInfo.tipRE++;
      rearr.value.push(data[i].name);
    }
  }
  console.log(rearr);
};

// ---------------------筛选功能------------------------
// 按钮筛选
let searchZG = () => {
  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (
      item.status == 1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1 &&
      String(item.name).indexOf(String(inpData.inpName)) > -1 &&
      String(item.account).indexOf(String(inpData.inpComp)) > -1 &&
      String(item.title).indexOf(String(inpData.inpItem)) > -1 &&
      String(item.grade_title).indexOf(String(inpData.inpDj)) > -1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1
    ) {
      return item;
    } else {
      // ElMessage.error('未查找到该员工信息')
      console.log(111);
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};
let searchLZ = () => {
  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (
      item.status == 2 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1 &&
      String(item.name).indexOf(String(inpData.inpName)) > -1 &&
      String(item.account).indexOf(String(inpData.inpComp)) > -1 &&
      String(item.title).indexOf(String(inpData.inpItem)) > -1 &&
      String(item.grade_title).indexOf(String(inpData.inpDj)) > -1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1
    ) {
      return item;
    } else {
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};
let searchCQ = () => {
  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (
      item.layout == 1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1 &&
      String(item.name).indexOf(String(inpData.inpName)) > -1 &&
      String(item.account).indexOf(String(inpData.inpComp)) > -1 &&
      String(item.title).indexOf(String(inpData.inpItem)) > -1 &&
      String(item.grade_title).indexOf(String(inpData.inpDj)) > -1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1
    ) {
      return item;
    } else {
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};
let searchDQ = () => {
  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (
      item.layout == 2 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1 &&
      String(item.name).indexOf(String(inpData.inpName)) > -1 &&
      String(item.account).indexOf(String(inpData.inpComp)) > -1 &&
      String(item.title).indexOf(String(inpData.inpItem)) > -1 &&
      String(item.grade_title).indexOf(String(inpData.inpDj)) > -1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1
    ) {
      return item;
    } else {
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};
let searchXY = () => {
  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (
      item.layout == 3 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1 &&
      String(item.name).indexOf(String(inpData.inpName)) > -1 &&
      String(item.account).indexOf(String(inpData.inpComp)) > -1 &&
      String(item.title).indexOf(String(inpData.inpItem)) > -1 &&
      String(item.grade_title).indexOf(String(inpData.inpDj)) > -1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1
    ) {
      return item;
    } else {
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};
let searchRE = () => {
  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (String(item.name).indexOf(String(rearr.value)) > -1) {
      return item;
    } else {
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};
// 输入框筛选
let searchYear = () => {
  console.log(inpData);
  let date = new Date(inpData.inpYears);
  let year = date.getFullYear(); // 年
  let month = <any>date.getMonth() + 1; // 月
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  inpData.inpYear = `${year}-${month}`;
  console.log(inpData.inpYear);
  if (inpData.inpYear == "1970-01") {
    inpData.inpYear = "";
  }

  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (
      (item.status == 1 ||
        item.status == 2 ||
        item.layout == 1 ||
        item.layout == 2 ||
        item.layout == 3) &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1 &&
      String(item.name).indexOf(String(inpData.inpName)) > -1 &&
      String(item.account).indexOf(String(inpData.inpComp)) > -1 &&
      String(item.title).indexOf(String(inpData.inpItem)) > -1 &&
      String(item.grade_title).indexOf(String(inpData.inpDj)) > -1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1
    ) {
      return item;
    } else {
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};

let searchinput = () => {
  tableData.value = reserTable.value;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    if (tableData.value.length < 1) {
      ElMessage.error("未查找到该员工信息");
    }
  }, 600);
  tableData.value = tableData.value.filter(function (item) {
    if (
      (item.status == 1 ||
        item.status == 2 ||
        item.layout == 1 ||
        item.layout == 2 ||
        item.layout == 3) &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1 &&
      String(item.name).indexOf(String(inpData.inpName)) > -1 &&
      String(item.account).indexOf(String(inpData.inpComp)) > -1 &&
      String(item.title).indexOf(String(inpData.inpItem)) > -1 &&
      String(item.grade_title).indexOf(String(inpData.inpDj)) > -1 &&
      String(item.create_time).indexOf(String(inpData.inpYear)) > -1
    ) {
      return item;
    } else {
      return;
    }
  });
  tableDatalen.value = tableData.value.length;
};

// -------------------------下拉菜单组件-------------------------
const handleCommand = menid => {
  console.log(menid);
};

// 档级弹窗参数
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const dangForm = reactive({
  salary: "",
  stage: ""
});

// 重置按钮
let reset = () => {
  tableData.value = [];
  responseData();
  inpData.inpName = "";
  inpData.inpComp = "";
  inpData.inpItem = "";
  inpData.inpDj = "";
  inpData.inpZs = "";
  inpData.inpYear = "";
  inpData.inpYears = "";
  currentPage.value = 1;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};
// loading 加载
const loading = ref(false);

// --------------------------------新增信息----------------------------------
const addform = reactive({
  name: "",
  tel: "",
  idcard: "",
  sex: "",
  birthday: "",
  address: "",
  gradeid: "",
  base_pay: "",
  record: "",
  bank: "",
  bank_card: "",
  political_status: "",
  companyid: "",
  projectid: "",
  layou: "",
  status: "",
  agreement_end: "",
  agreement_num: "",
  ruzhitime: "",
  lizhitime: ""
});
function clearIfo() {
  addform.name = "";
  addform.tel = "";
  addform.idcard = "";
  addform.sex = "";
  addform.birthday = "";
  addform.address = "";
  addform.gradeid = "";
  addform.base_pay = "";
  addform.record = "";
  addform.bank = "";
  addform.bank_card = "";
  addform.political_status = "";
  addform.companyid = "";
  addform.projectid = "";
  addform.layou = "";
  addform.status = "";
  addform.agreement_end = "";
  addform.agreement_num = "";
  addform.ruzhitime = "";
  addform.lizhitime = "";
}
const addmodelshow = ref(false);
const opstatus = ref(0);
let addinfo = () => {
  addmodelshow.value = true;
  clearIfo();
  opstatus.value = 1;
};
// 组件日期数据转换
const tititit = ref();
let datehuan = () => {
  let date = new Date(tititit.value);
  let year = date.getFullYear(); // 年
  let month = <any>date.getMonth() + 1; // 月
  let day = <any>date.getDate(); // 日
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  addform.agreement_end = `${year}-${month}-${day}`;
  console.log(addform.agreement_end);
  if (addform.agreement_end == "1970-01") {
    addform.agreement_end = "";
  }
};
const tititits = ref();
let datehuans = () => {
  let date = new Date(tititits.value);
  let year = date.getFullYear(); // 年
  let month = <any>date.getMonth() + 1; // 月
  let day = <any>date.getDate(); // 日
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  editinfo.agreement_end = `${year}-${month}-${day}`;
  console.log(editinfo.agreement_end);
  if (editinfo.agreement_end == "1970-01") {
    editinfo.agreement_end = "";
  }
};
// 添加操作
// 添加验证规则
const ruleFormRef = ref(null);
const rules = ref<any>({
  name: [{ required: true, message: "请输入姓名", trigger: "change" }],
  tel: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: ["blur", "change"]
    }
  ],
  idcard: [
    { required: true, message: "请输入证件号码", trigger: "blur" },
    {
      pattern:
        /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/,
      message: "请输入正确的身份证",
      trigger: ["blur", "change"]
    }
  ],
  address: [{ required: true, message: "请输入籍贯", trigger: "blur" }],
  gradeid: [{ required: true, message: "请选择档级", trigger: "blur" }],
  record: [{ required: true, message: "请选择学历", trigger: "blur" }],
  bank: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  bank_card: [
    { required: true, message: "请输入银行卡号", trigger: "blur" },
    {
      pattern: /^([1-9]{1})(\d{15}|\d{18})$/,
      message: "请输入正确的卡号",
      trigger: ["blur", "change"]
    }
  ],
  political_status: [
    { required: true, message: "请选择政治面貌", trigger: "blur" }
  ],
  companyid: [{ required: true, message: "请选择公司", trigger: "blur" }],
  projectid: [{ required: true, message: "请选择项目", trigger: "blur" }],
  layou: [{ required: true, message: "请选择用工形式", trigger: "blur" }],

  status: [{ required: true, message: "请选择员工状态", trigger: "blur" }],
  agreement_end: [{ required: true, message: "请选择时间", trigger: "blur" }],
  agreement_num: [
    { required: true, message: "请选择现合同期限", trigger: "blur" }
  ],
  ruzhitime: [{ required: true, message: "请选择入职时间", trigger: "blur" }]
});
const ruleFormRefs = ref(null);
const ruless = ref<any>({
  name: [{ required: true, message: "请输入姓名", trigger: "change" }],
  tel: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: ["blur", "change"]
    }
  ],
  idcard: [
    { required: true, message: "请输入证件号码", trigger: "blur" },
    {
      pattern:
        /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/,
      message: "请输入正确的身份证",
      trigger: ["blur", "change"]
    }
  ],
  address: [{ required: true, message: "请输入籍贯", trigger: "blur" }],
  gradeid: [{ required: true, message: "请选择档级", trigger: "blur" }],
  record: [{ required: true, message: "请选择学历", trigger: "blur" }],
  bank: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  bank_card: [
    { required: true, message: "请输入银行卡号", trigger: "blur" },
    {
      pattern: /^([1-9]{1})(\d{15}|\d{18})$/,
      message: "请输入正确的卡号",
      trigger: ["blur", "change"]
    }
  ],
  political_status: [
    { required: true, message: "请选择政治面貌", trigger: "blur" }
  ],
  companyid: [{ required: true, message: "请选择公司", trigger: "blur" }],
  projectid: [{ required: true, message: "请选择项目", trigger: "blur" }],
  layou: [{ required: true, message: "请选择用工形式", trigger: "blur" }],

  status: [{ required: true, message: "请选择员工状态", trigger: "blur" }],
  agreement_end: [{ required: true, message: "请选择时间", trigger: "blur" }],
  agreement_num: [
    { required: true, message: "请选择现合同期限", trigger: "blur" }
  ],
  ruzhitime: [{ required: true, message: "请选择入职时间", trigger: "blur" }]
});
// 输入身份证回显
let idcardinp = () => {
  let sexnum;
  sexnum = addform.idcard.slice(
    addform.idcard.length - 2,
    addform.idcard.length - 1
  );
  addform.sex = sexnum % 2 === 0 ? "女" : "男";
  let birthdaynum = addform.idcard.substring(6, 14);
  let y = birthdaynum.substring(0, 4);
  let m = birthdaynum.substring(4, 6);
  let d = birthdaynum.substring(6, 8);
  addform.birthday = `${y}-${m}-${d}`;
};
let idcardinps = () => {
  let sexnum;
  sexnum = editinfo.idcard.slice(
    editinfo.idcard.length - 2,
    editinfo.idcard.length - 1
  );
  editinfo.sex = sexnum % 2 === 0 ? "女" : "男";
  let birthdaynum = editinfo.idcard.substring(6, 14);
  let y = birthdaynum.substring(0, 4);
  let m = birthdaynum.substring(4, 6);
  let d = birthdaynum.substring(6, 8);
  editinfo.birthday = `${y}-${m}-${d}`;
};
// 选择档级回显
let gangwei = () => {
  gongzi(grades.value);
};
let gongzi = data => {
  for (let item of data) {
    if (item.children) {
      gongzi(item.children);
    } else {
      if (item.id == addform.gradeid) {
        addform.base_pay = item.money;
      }
    }
  }
};
let gangweis = () => {
  gongzi(grades.value);
};
let gongzis = data => {
  for (let item of data) {
    if (item.children) {
      gongzis(item.children);
    } else {
      if (item.id == editinfo.gradeid) {
        editinfo.base_pay = item.money;
      }
    }
  }
};
let addsure = () => {
  addmodelshow.value = true;
  console.log(ruleFormRef.value);
  ruleFormRef.value.validate(valid => {
    console.log(valid);

    // 不通过校验
    if (!valid) return ElMessage.error("请将内容填写完成后 再进行添加操作!");
    let addobj = {
      name: addform.name,
      tel: addform.tel,
      idcard: addform.idcard,
      sex: addform.sex,
      birthday: addform.birthday,
      address: addform.address,
      gradeid: addform.gradeid,
      base_pay: addform.base_pay,
      record: addform.record,
      bank: addform.bank,
      bank_card: addform.bank_card,
      political_status: addform.political_status,
      companyid: addform.companyid,
      projectid: addform.projectid[1],
      layout: addform.layou,
      status: addform.status,
      agreement_end: addform.agreement_end,
      agreement_num: addform.agreement_num,
      entry_time: "0000-00-00"
    };
    addItem(addobj).then(res => {
      console.log(JSON.parse(res));
      if (JSON.parse(res).code == 1) {
        addmodelshow.value = false;
        responseData();
        ElNotification({
          title: "Success",
          message: "添加成功",
          type: "success"
        });
        dialogFormVisible.value = false;
        loading.value = true;
        setTimeout(() => {
          loading.value = false;
        }, 800);
      } else {
        ElNotification({
          title: "Error",
          message: "操作失败",
          type: "error"
        });
      }
    });
    console.log(addobj);
  });
};
// --------------------------------编辑信息----------------------------------
const editmodels = ref(false);
const editmodel = ref(false);
const activeName = ref("first");
const rutime = ref(null);
const editinfo = <any>reactive({
  name: "",
  tel: "",
  idcard: "",
  sex: "",
  address: "",
  grade: "",
  gradeid: "",
  base_pay: "",
  money: "0.00",
  create_time: "",
  record: "",
  bank: "",
  agreement_end: "",
  bank_card: "",
  political_status: "",
  company: "",
  project: "",
  layout: "",
  password: "",
  agreement_num: "",
  ruzhitime: "0000-00-00",
  lizhitime: "",
  ge: "0.00",
  dan: "0.00",
  birthday: "",
  projectid: "",
  companyid: "",
  status: ""
});
function clearEdit() {
  editinfo.name = "";
  editinfo.tel = "";
  editinfo.idcard = "";
  editinfo.sex = "";
  editinfo.address = "";
  editinfo.grade = "";
  editinfo.gradeid = "";
  editinfo.base_pay = "";
  editinfo.money = "0.00";
  editinfo.create_time = "";
  editinfo.record = "";
  editinfo.bank = "";
  editinfo.agreement_end = "";
  editinfo.bank_card = "";
  editinfo.political_status = "";
  editinfo.company = "";
  editinfo.project = "";
  editinfo.layout = "";
  editinfo.password = "";
  editinfo.agreement_num = "";
  editinfo.ruzhitime = "0000-00-00";
  editinfo.lizhitime = "";
  editinfo.ge = "0.00";
  editinfo.dan = "0.00";
  editinfo.birthday = "";
  editinfo.projectid = "";
  editinfo.companyid = "";
  editinfo.status = "";
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const editid = ref();
const mname = ref();
// 人名按钮
let eridbtn = (menid, menname) => {
  clearEdit();
  mname.value = menname;
  editmodel.value = true;
  console.log(menid);
  console.log(tableData.value);
  editid.value = menid;
  cardForm.userid = menid;
  cardForms.userid = menid;
  for (let item of tableData.value) {
    if (item.id == menid) {
      editinfo.name = item.name;
      editinfo.tel = item.tel;

      editinfo.idcard = item.idcard;
      editinfo.sex = item.sex;
      editinfo.birthday = item.birthday;
      editinfo.address = item.address;
      editinfo.grade = item.grade_title;
      editinfo.gradeid = item.gradeid;
      editinfo.base_pay = item.base_pay;
      editinfo.money = item.base_pay;
      editinfo.create_time = item.create_time;
      editinfo.record = item.record;
      tititits.value = `${item.agreement_end}`;
      editinfo.bank_card = item.bank_card;
      editinfo.bank = item.bank;

      editinfo.political_status = item.political_status;

      editinfo.company = item.account;
      editinfo.project = item.title;
      editinfo.layout =
        item.layout == 1 ? "长期派遣" : item.layout == 2 ? "短期派遣" : "学员";

      editinfo.password = item.password;
      editinfo.agreement_num = item.agreement_num;
      editinfo.ruzhitime = item.entry_time;
      editinfo.ge = item.gr;
      editinfo.dan = item.dw;

      editinfo.projectid = item.projectid;
      editinfo.companyid = item.companyid;
      editinfo.status = `${item.status}`;
    }
  }
};
let editshow = () => {
  editmodels.value = true;
};
let editsure = () => {
  ruleFormRefs.value.validate(valid => {
    console.log(valid);
    // 不通过校验
    if (!valid) return ElMessage.error("请将内容填写完成后 再进行添加操作!");
    console.log(editid.value);
    let editobj = {
      id: editid.value,
      idcard: editinfo.idcard,
      birthday: editinfo.birthday,
      address: editinfo.address,
      record: editinfo.record,
      bank_card: editinfo.bank_card,
      bank: editinfo.bank,
      agreement_end: editinfo.agreement_end,
      agreement_num: editinfo.agreement_num,
      political_status: editinfo.political_status,
      layout:
        editinfo.layout == "长期派遣"
          ? 1
          : editinfo.layout == "短期派遣"
            ? 2
            : 3,
      status: editinfo.status,
      dw_security: editinfo.dan,
      gr_security: editinfo.ge
    };
    editItem(editobj).then(res => {
      console.log(JSON.parse(res));
      if (JSON.parse(res).code == 1) {
        responseData();
        editmodels.value = false;
        editmodel.value = false;
        ElNotification({
          title: "Success",
          message: "操作成功",
          type: "success"
        });
        dialogFormVisible.value = false;
        loading.value = true;
        setTimeout(() => {
          loading.value = false;
        }, 800);
      } else {
        ElNotification({
          title: "Error",
          message: "操作失败",
          type: "error"
        });
      }
    });
    console.log(editobj);
  });
};

// --------------------------------删除操作------------------------------------
const centerDialogVisible = ref(false);
let arrData = [];
// 获取表格复选框id
const multipleTableRef = ref();
let delitem = () => {
  multipleTableRef.value.getSelectionRows().map(item => {
    arrData.push(item.id);
  });
  if (arrData.length >= 1) {
    centerDialogVisible.value = true;
  } else {
    ElNotification({
      title: "Error",
      message: "请选择要删除的数据",
      type: "error"
    });
  }
};
let delsure = () => {
  centerDialogVisible.value = false;
  delItem({
    id: arrData
  }).then(res => {
    console.log(JSON.parse(res));
    if (JSON.parse(res).code == 1) {
      ElNotification({
        title: "Success",
        message: "删除成功",
        type: "success"
      });
      reset();
    } else {
      ElNotification({
        title: "Error",
        message: "删除失败，请稍后重试",
        type: "error"
      });
    }
  });
};
// ----------------------------证书专区----------------------------
const cardid = ref();
const cardmodels = ref(false);
const cardFormRef = ref(null);
const cardForm = reactive({
  userid: "",
  title: "",
  level: "",
  gettime: "",
  review_time: "",
  thumb: "",
  certclassid: ""
});
const cardForms = reactive({
  id: "",
  userid: "",
  title: "",
  level: "",
  gettime: "",
  review_time: "",
  thumb: "",
  certclassid: ""
});
//图片上传成功的钩子
// 上传成功，获取返回的图片地址
let handleAvatarSuccess = res => {
  console.log(res);
  cardForm.thumb = "http://test_labour.xingyuncm.cn" + res.url;
};
const cardrule = ref({
  title: [{ required: true, message: "请输证书名称", trigger: "blur" }],
  gettime: [
    { required: true, message: "请选择证书获取时间", trigger: "change" }
  ],
  review_time: [
    { required: true, message: "请选择证书复审时间", trigger: "change" }
  ],
  thumb: [{ required: true, message: "请上传证书图片", trigger: "change" }]
});
const caedindexs = ref();
const cardData = ref([]);
const huixianid = ref();
let cardBtn = (carid, indexs) => {
  caedindexs.value = indexs;
  cardForm.certclassid = carid;
  cardForms.certclassid = carid;
  console.log(cardForm);
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  cardmodels.value = true;
  console.log(cardid.value);
  cerdshow({ id: editid.value }).then(res => {
    console.log(JSON.parse(res));
    cardData.value = JSON.parse(res).data;
    if (JSON.parse(res).code == 1 && JSON.parse(res).data[indexs]) {
      huixianid.value = JSON.parse(res).data[indexs].id;
      cardForm.title = JSON.parse(res).data[indexs].classtitle;
      cardForm.level = JSON.parse(res).data[indexs].level;
      cardForm.gettime = JSON.parse(res).data[indexs].gettime;
      cardForm.review_time = JSON.parse(res).data[indexs].review_time;
      cardForm.thumb =
        "http://test_labour.xingyuncm.cn" + JSON.parse(res).data[indexs].thumb;

      cardForms.title = JSON.parse(res).data[indexs].classtitle;
      cardForms.level = JSON.parse(res).data[indexs].level;
      cardForms.gettime = JSON.parse(res).data[indexs].gettime;
      cardForms.review_time = JSON.parse(res).data[indexs].review_time;
      cardForms.thumb =
        "http://test_labour.xingyuncm.cn" + JSON.parse(res).data[indexs].thumb;
    } else {
      clearCard();
      ElNotification({
        title: "Error",
        message: "未添加证书",
        type: "error"
      });
    }
  });
};

function clearCard() {
  cardForm.title = "";
  cardForm.level = "";
  cardForm.gettime = "";
  cardForm.review_time = "";
  cardForm.thumb = "";

  cardForms.title = "";
  cardForms.level = "";
  cardForms.gettime = "";
  cardForms.review_time = "";
  cardForms.thumb = "";
}

let cardsure = () => {
  cardmodels.value = false;
  cardFormRef.value.validate(valid => {
    console.log(valid);
    // 不通过校验
    if (!valid) return ElMessage.error("请将内容填写完成后 再进行添加操作!");

    for (let item of cardData.value) {
      if (!item[caedindexs.value]) {
        console.log(cardForm);
        cerdadd(cardForm).then(res => {
          console.log(JSON.parse(res));
          if (JSON.parse(res).code == 1) {
            centerDialogVisible.value = false;
            ElNotification({
              title: "Success",
              message: "添加成功",
              type: "success"
            });
            reset();
          } else {
            ElNotification({
              title: "Error",
              message: "操作失败",
              type: "error"
            });
          }
        });
        return;
      } else {
        cardForms.id = huixianid.value;
        console.log(cardForms);
        cerdadd(cardForm).then(res => {
          console.log(JSON.parse(res));
          if (JSON.parse(res).code == 1) {
            centerDialogVisible.value = false;
            ElNotification({
              title: "Success",
              message: "操作成功",
              type: "success"
            });
            reset();
          } else {
            ElNotification({
              title: "Error",
              message: "操作失败",
              type: "error"
            });
          }
        });
        return;
      }
    }
  });
};
let closeDrawer = () => {};
// -----------------------删除证书-------------------------
let carddel = () => {
  cerdel({ id: cardid.value }).then(res => {
    console.log(JSON.parse(res));
    if (JSON.parse(res).code == 1) {
      centerDialogVisible.value = false;
      ElNotification({
        title: "Success",
        message: "操作成功",
        type: "success"
      });
      reset();
    } else {
      ElNotification({
        title: "Error",
        message: "操作失败",
        type: "error"
      });
    }
  });
};
</script>

<style>
/* .divbg{
  padding: 10px 0;
} */
h1 {
  font-weight: 400;
  padding: 0 0 10px 0;
}
.topBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.btnStyle {
  position: relative;
  margin-right: 20px;
}
.searchBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tableBox {
  width: 100%;
}
.pageBox {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 下拉菜单组件样式 */
.el-dropdown-link {
  cursor: pointer;
  color: #5aabff;
  display: flex;
  align-items: center;
  border: none;
}
.addinput {
  width: 29%;
  margin-right: 26px;
}
/* 编辑区域样式 */
.edittitle {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.edittitle > p {
  font-size: 18px;
  font-weight: 600;
  color: #172b4d;
}
.drawer_top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.drawer_top > div {
  font-weight: bold;
}
.drawer_top > p {
  color: #909399;
  cursor: pointer;
}
.drawer_comtent {
  width: 100%;
}
.editecho {
  width: 28%;
  margin-right: 5.3%;
}
.cards {
  width: 23%;
  padding: 5px;
}
.carditem {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.upimg {
  width: 20px;
  height: 20px;
}
.cardbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.avatar {
  width: 177px;
  height: 177px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.cardinpt {
  width: 90%;
}
</style>
